<template>
    <div>
        <h1>Array-扩展方法</h1>

        <!-- 移除内容 -->
        <h3>remove-移除数组中的指定内容</h3>
        <div>指定内容：</div>
        <div class="code">
            const arr1 = ['1', '1', '2', '2']
            <br />
            arr1.remove((v) => v === '1')
            <br />
            console.log(arr1) //['2', '2']
        </div>
        <div>指定对象字段内容：</div>
        <div class="code">
            const arr2 = [ { name: '1' }, { name: '1' }, { name: '2' }, { name: '2' } ]
            <br />
            arr2.remove((v) => v.name === '1')
            <br />
            console.log(JSON.stringify(arr2)) //[{"name":"2"},{"name":"2"}]
            <br />
        </div>

        <!-- 去重 -->
        <h3>toSet-去除重复内容（有返回）</h3>
        <div>对内容去重：</div>
        <div class="code">
            let arr1 = ['1', '1', '2', '2']
            <br />
            arr1 = arr1.toSet()
            <br />
            console.log(arr1) //['1', '2']
        </div>
        <div>对字段去重：</div>
        <div class="code">
            let arr2 = [ { name: '1' }, { name: '1' }, { name: '2' }, { name: '2' } ]
            <br />
            arr2 = arr2.toSet((next,pre)=>next.name===pre.name)
            <br />
            console.log(JSON.stringify(arr2)) //[{"name":"1"},{"name":"2"}]
            <br />
        </div>

        <!-- 随机排序 -->
        <h3>randSort-随机排序</h3>
        <div class="code">
            const arr1 = [1, 2, 3, 4]
            <br />
            arr1.randSort()
            <br />
            console.log(arr1);//[2, 3, 1, 4]
        </div>

        <!-- 累加 -->
        <h3>sum-累加（有返回）</h3>
        <div>对内容累加：</div>
        <div class="code">
            const arr1 = [1, 2, 3, 4]
            <br />
            const num1 = arr1.sum()
            <br />
            console.log(num1);//10
        </div>
        <div>对字段累加：</div>
        <div class="code">
            let arr2 = [ { name: 1 }, { name: 2 }, { name: 3 }, { name: 4 } ]
            <br />
            const num2 = arr2.sum('name')
            <br />
            console.log(num2);//10
            <br />
        </div>

    </div>
</template>
<script setup lang="ts">
</script>
<style lang="less" scoped></style>
